<template>
   <!-- <div style="height:100%;background-color: rgb(238, 238, 238)"> -->
   <div>
	   <!-- 日常工作 -->
	   <div class="top" v-if="daily.length>0">
           <div class="title">
                <img src="../../../../assets/imgs/processManagement/work1.png" alt="">日常工作          
           </div>
           <div class="content">
                <div class="contentImg">
                    <ul>
                        <li v-for="(item,index) in daily" :key="index">
                            <a  @click="addressFlowRouter(item.name,item.id,item.key)">
                                <img :src=item.picture alt="">
                            </a>  
                        </li>
                    </ul>
                </div>
           </div>
       </div>
	   <!-- 财务管理 -->
	   <div class="middle_top"  v-if="financial.length>0">
            <div class="title">
                <img src="../../../../assets/imgs/processManagement/work1.png" alt="">财务管理          
           </div>
         <div class="content">
                <div class="contentImg">
                    <ul>
                        <li v-for="(item,index) in financial" :key="index">
                            <a  @click="addressFlowRouter(item.name,item.id,item.key)">
                                <img :src=item.picture alt="">
                            </a>  
                        </li>
                    </ul>
                </div>
           </div>
       </div>
	   <!-- 合同管理 -->
	   <div class="middle_bottom"  v-if="contract.length>0">
            <div class="title">
                <img src="../../../../assets/imgs/processManagement/project2.png" alt="">合同管理             
           </div>
          <div class="content">
                <div class="contentImg">
                    <ul>
                        <li v-for="(item,index) in contract" :key="index">
                            <a  @click="addressFlowRouter(item.name,item.id,item.key)">
                                <img :src=item.picture alt="">
                            </a>  
                        </li>
                    </ul>
                </div>
           </div>
       </div>
	   <!-- 项目管理 -->
	   <div class="bottom" v-if="project.length>0">
            <div class="title">
                <img src="../../../../assets/imgs/processManagement/project2.png" alt="">项目管理(开发中，敬请期待...)    
            </div>
           <div class="content">
                <div class="contentImg">
                    <ul>
                        <!-- <li v-for="(item,index) in project" :key="index">
                            <img :src=item.src alt="">
                        </li> -->
                        <li v-for="(item,index) in project" :key="index">
                            <a  @click="addressFlowRouter(item.name,item.id,item.key)">
                                <img :src=item.name alt="">
                            </a>  
                        </li>
                    </ul>
                </div>
           </div>
       </div>
   </div>
</template>
<script>
	export default {
		data() {
			return {
                companyId:'',//公司id
				daily: [],//日常工作
                financial:[],// 财务管理
                contract:[],//合同管理
                 project:[//项目管理
                    {name:require("@/assets/imgs/processManagement/11.png")},
                    {name:require("@/assets/imgs/processManagement/12.png")},
                    {name:require("@/assets/imgs/processManagement/13.png")},
                    {name:require("@/assets/imgs/processManagement/14.png")},
                    {name:require("@/assets/imgs/processManagement/15.png")},
                    {name:require("@/assets/imgs/processManagement/16.png")},
                    {name:require("@/assets/imgs/processManagement/17.png")},
                    {name:require("@/assets/imgs/processManagement/18.png")},
                    {name:require("@/assets/imgs/processManagement/19.png")},
                    {name:require("@/assets/imgs/processManagement/20.png")},
                    {name:require("@/assets/imgs/processManagement/21.png")},
                    {name:require("@/assets/imgs/processManagement/22.png")},
                    {name:require("@/assets/imgs/processManagement/23.png")},
                    {name:require("@/assets/imgs/processManagement/24.png")},
                    {name:require("@/assets/imgs/processManagement/25.png")},
                    {name:require("@/assets/imgs/processManagement/26.png")},
                    {name:require("@/assets/imgs/processManagement/27.png")},                   
                ],
                showDis:true
			}
		},
        computed: {
             //用户名
            userName () {
                return JSON.parse(localStorage.getItem('user')).name
            }
        },
        //接收ID参数
        created(){
            this.companyId= this.$route.query.id;
        },
        activated(){
            this.inquireInfo();
        },
		methods:{
            //根据公司id查询查询
            inquireInfo(){
               this.$http({
                    url:'/flowable/model/findByOffice',
                    method:'get',
                    params:{
                        'companyId':this.companyId
                    }
                }).then(({data}) => {
                    // console.log('data',data)
                    if (data) {
                       this.daily=data.dateWork;//日常工作
                       this.financial=data.moneyWork;//财务管理
                       this.contract=data.contractWork;//合同管理
                       if(this.contract.length==0){
                           this.showDis=false
                       }
                    //    this.project=data.pojectWork;//项目管理
                    } 
                })
            },
			//跳转
			addressFlowRouter(processName,procDefId,procDefKey){
                if((processName&&procDefId&&procDefKey)){
                    let tabTitle = '发起流程【'+processName+'】';
                    let processTitle = `${this.userName} 在 ${this.moment(new Date()).format('YYYY-MM-DD HH:mm')} 发起了 [`+processName+']';
                    this.$http({
                        url:'/flowable/task/getTaskDef',
                        method:'get',
                        params:{
                            procDefId: procDefId,
                            status: 'start' 
                        }
                    }).then(({data}) => {
                        if (data.success) {
                            this.$router.push({
                            path: '/flowable/task/TaskForm',
                            query: {procDefId: procDefId, procDefKey:procDefKey, status: 'start', title: tabTitle, formType: data.flow.formType, formUrl: data.flow.formUrl, formTitle: processTitle,id:this.$route.query.id}
                            })
                        }
                    })
                }else{
                    this.$message.warning('该流程正在开发中');
                }               
            },
		},
	}
</script>
<style scoped>
*{
    margin:0;
    padding:0;
}
/* 四大模块 */
.top,.middle_top,.middle_bottom,.bottom {
    width: 100%;
    background-color: white;
}
/* 所有标题样式 */
.title{
    width: 100%;
    height: 25px;
    margin:2px 0;
    background-color: rgb(238, 238, 238);
    display: flex;
    flex-direction: row;
    font-size: 13px;
    align-items: center;
    color: #1081a3;
}
/* 标题前小图,标题*/
.title img {
    width: 15px;
    height: 15px;
    margin: 5px 5px;

}

/* 内容样式 */
.content{
    text-align: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px 10px 0 0;
    padding:10px 0;
}

.content .contentImg{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.content ul {
    display: flex;
    flex-wrap: wrap;
}

.content li {
    list-style-type: none;
    display: inline-block;
    width: 8.2%;
    padding: 10px 0;
}
/* 图片样式 */
.content li img {
    width: 65px;
    height: 65px;
    -webkit-transition: all 0.3s;
    -webkit-transform-origin: 40% 70%;
}
/* 图片悬浮样式 */
.content li:hover img {
    -webkit-transform: scale(1.4);
}
</style>